<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>
<body>

<div>
    <input type="text" placeholder="员工姓名" v-model="arr.name">
    <input type="text" placeholder="员工性别" v-model="arr.gender">
    <input type="text" placeholder="员工年龄" v-model="arr.age">
    <input type="text" placeholder="员工工资" v-model="arr.salary">
    <input type="text" placeholder="员工岗位" v-model="arr.job">
    <input type="button" value="添加" @click="f">
    <table border="2px">
        <caption>员工信息表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>工资</th>
            <th>岗位</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,i) in con ">
            <td>{{i+1}}</td>
            <td>{{emp.name1}}</td>
            <td>{{emp.gender1}}</td>
            <td>{{emp.age1}}</td>
            <td>{{emp.salary1}}</td>
            <td>{{emp.job1}}</td>
            <td><input type="button" value="删除" @click="del(i)"></td>
        </tr>
    </table>
</div>
<script src="../day06/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            con: [],
            arr:{name: " ", gender: "", arr: "", salary: "", job: ""}
        }, methods: {
            f() {
                v.con.push({name1 :v.arr.name, gender1: v.arr.gender, age1: v.arr.age, salary1: v.arr.salary, job1: v.arr.job});
            },
            del(i) {
                v.con.splice(i, 1);
            }
        }


    })
</script>
</body>
</html>